<template>
  <div id="app">
    <!-- <div>
        <van-nav-bar
          title="江南布衣"
          left-text="返回"
          left-arrow
           @click-left="onClickLeft"
        />
      </div> -->
    <div style="width:100%;padding:10%">
      <h3>请选择类别</h3>
      <div
        style="margin-top: 100px;"
        v-if="id==1"
      >
        <div
          class="title"
          @click="toDetail(djfz)"
        >当季服装</div>
        <div
          class="title"
          @click="toDetail(djffz)"
        >当季非服装</div>
      </div>
      <div
        style="margin-top: 100px;"
        v-if="id==3"
      >
        <div
          class="title"
          @click="toDetail(homedj)"
        >HOME当季服装</div>
        <div
          class="title"
          @click="toDetail(homewj)"
        >HOME往季服装</div>
      </div>
      <div
        style="margin-top: 100px;"
        v-if="id==4"
      >
        <div
          class="title"
          @click="toDetail(apndj)"
        >APN当季服装</div>
        <div
          class="title"
          @click="toDetail(apnwj)"
        >APN往季服装</div>
      </div>
      <div
        style="margin-top: 100px;"
        v-if="id==5"
      >
        <div
          class="title"
          @click="toDetail(pommedj)"
        >蓬马当季服装</div>
        <div
          class="title"
          @click="toDetail(pommewj)"
        >蓬马往季服装</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data() {
    return {
      id: this.$route.query.id,
      djfz: 'djfz',
      djffz: 'djffz',
      homedj: 'homedj',
      homewj: 'homewj',
      apndj: 'apndj',
      apnwj: 'apnwj',
      pommedj: 'pommedj',
      pommewj: 'pommewj',
    }
  },
    created:function(){
     document.title = '员工福利';
},
  methods: {
    onClickLeft() {
      this.$router.push({ path: '/' })
    },
    toDetail(item) {
      this.$router.push({ path: 'detail', query: { type: item } })
    },
  },
}
</script>
<style scoped>
#app {
  height: 100vh;
  background-image: url('./bg.jpg');
}
h3 {
  display: block;
  font-size: 30px;
  text-align: center;
  padding: 20px 0;
  color: #646566;
  margin: 30px 0;
  font-weight: bold;
}
.title {
  text-align: center;
  color: #2c3e50;
  font-size: 16px;
  height: 60px;
  background: hsl(0deg 0% 100% / 60%);
  line-height: 60px;
  margin-bottom: 100px;
}
</style>